import './ThemeSelect.scss'
import { Badge } from 'antd'
import PropTypes from 'prop-types'

import { ModelHomeA01, ModelHomeA02 } from '../../Admin/Home/Common'
import { useState } from 'react';

const HomeType = {
    A01: ModelHomeA01,
    A02: ModelHomeA02
}

const ThemeSelect = ({ data, ModalEvent }) => {
    ThemeSelect.propTypes = { data: PropTypes.string, ModalEvent: PropTypes.object }

    const [Active, setActive] = useState(data)

    const onClick = (item) => {
        setActive(item)
        ModalEvent.emit(item)
    }


    return (
        <div className='ThemeSelect'>
            {Object.keys(HomeType).map(item => {
                const Template = HomeType[item]
                return (
                    <div className='Item' key={item} onClick={() => onClick(item)}>
                        {Active === item ?
                            <Badge.Ribbon text="当前选中">
                                <Template />
                            </Badge.Ribbon> :
                            <Template />
                        }
                    </div>
                )
            })}
        </div>
    );
};

export default ThemeSelect;